<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="depotDataForm"
        :model="depotDataForm"
        :rules="rules"
        :disabled="operation === 0"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >
        <el-form-item
          v-if="operation !== 1"
          :label="$t('depotLang.depotStatus')"
        >
          <div style="margin-left: 5px">
            {{
              $t(getTitleByValue(depotStatusOptions, depotDataForm.depotStatus))
            }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('depotLang.depotCode')"
          :prop="operation === 1 ? 'depotCode' : ''"
        >
          <el-input
            v-if="operation === 1"
            v-model="depotDataForm.depotCode"
            :placeholder="$t('depotLang.enlishAndNumbers')"
            clearable
            style="width: 100%"
          />
          <div v-else style="margin-left: 5px">
            {{ depotDataForm.depotCode }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('depotLang.depotName')" prop="depotName">
          <el-input
            v-model="depotDataForm.depotName"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item :label="$t('depotLang.depotType')" prop="depotType">
          <el-select
            v-model="depotDataForm.depotType"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in depotTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="$t('depotLang.' + item.title)"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('depotLang.country')" prop="countryId">
          <el-select
            v-model="depotDataForm.countryId"
            :placeholder="$t('pleaseEnter')"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="item in regionList"
              :key="item.regionId"
              :value="item.regionId"
              :label="item.regionNameCn"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('depotLang.province')" prop="province">
          <el-input
            v-model="depotDataForm.province"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item :label="$t('depotLang.city')" prop="city">
          <el-input
            v-model="depotDataForm.city"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item :label="$t('depotLang.address')" prop="addr">
          <el-input
            v-model="depotDataForm.addr"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item :label="$t('depotLang.postCode')" prop="post">
          <el-input
            v-model="depotDataForm.postCode"
            :placeholder="$t('pleaseEnter')"
            maxlength="6"
            show-word-limit
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item
          :label="$t('depotLang.contactPerson')"
          prop="contactPerson"
        >
          <el-input
            v-model="depotDataForm.contactPerson"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item :label="$t('depotLang.contactPhone')" prop="contactPhone">
          <el-input
            v-model="depotDataForm.contactPhone"
            :placeholder="$t('pleaseEnter')"
            maxlength="11"
            show-word-limit
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="submitLoading"
          @click="handleSubmit"
        >{{ $t("submit") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from 'await-to-js'
import { depotTypeDict, depotStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import {
  addDepot,
  getDepotInfo,
  modifyDepot
} from '@/api/business/depotManage/depot'
import { getRegionList } from '@/api/region/region'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      regionList: [], // 国家区域列表
      submitLoading: false,
      getTitleByValue: getTitleByValue,
      depotTypeOptions: getDictOptionList(depotTypeDict), // 仓库类型
      depotStatusOptions: getDictOptionList(depotStatusDict), // 仓库状态
      depotDataForm: {
        // depotStatus: null,
        depotCode: null,
        depotName: null,
        depotType: null,
        countryId: null,
        province: null,
        city: null,
        addr: null,
        postCode: null,
        contactPerson: null,
        contactPhone: null,
        createdUser: 0
      },
      rules: {
        depotCode: [
          {
            required: true,
            message: this.$t('pleaseEnter'),
            trigger: ['blur', 'change']
          },
          {
            required: true,
            // pattern: /^[a-zA-Z][a-zA-Z0-9]*$/,
            // pattern: /^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]+$/,
            pattern: /[A-Za-z0-9]$/,
            message: this.$t('depotLang.enlishAndNumbers'),
            trigger: ['blur', 'change']
          }
        ],
        depotName: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        depotType: {
          required: true,
          message: this.$t('pleaseSelect'),
          trigger: 'change'
        },
        countryId: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        province: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        city: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        addr: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        contactPerson: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        contactPhone: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
    this.getRegionList()
  },
  methods: {
    async getData() {
      if (!this.value || this.operation === 1) return
      const res = await getDepotInfo({
        depotId: this.value
      })
      // console.log(res);
      if (!res || res.data === null) return
      this.depotDataForm = res.data
      // console.log(res.data, "回显");
    },
    // 清空表单
    reset() {
      this.depotDataForm = {
        depotStatus: null,
        depotCode: null,
        depotName: null,
        depotType: null,
        countryId: null,
        province: null,
        city: null,
        addr: null,
        postCode: null,
        contactPerson: null,
        contactPhone: null,
        createdUser: 0
      }
      this.$refs.depotDataForm.resetFields()
    },
    // 提交
    async handleSubmit() {
      const [err] = await to(this.$refs.depotDataForm.validate())
      if (err === null) {
        if (this.operation === 1) {
          // 新增
          const res = await addDepot(this.depotDataForm)
          // console.log(res);
          if (res.data === null && res.returnCode === 10000) {
            this.$message.success(this.$t('addSuccess'))
            this.$emit('close')
            this.$emit('update:operation', 2)
          } else {
            this.$message.error(res.returnMsg)
          }
        } else if (this.operation === 2) {
          // 修改
          const res = await modifyDepot(this.depotDataForm)
          if (res.data === null && res.returnCode === 10000) {
            this.$message.success(this.$t('modifiedSuccess'))
            this.$emit('close')
          } else {
            this.$message.error(res.returnMsg)
          }
        }
      }
    },
    // 获取国家地区列表
    async getRegionList() {
      const { data } = await getRegionList({
        regionName: ''
      })
      // console.log(data);
      this.regionList = data
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}
</script>

<style></style>
